<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts';
  import { getCustomerRateCount } from 'api/reportStatistics/investorReport/index';
  require('echarts/theme/macarons'); // echarts 主题
  import { debounce } from 'utils';

  export default {
    props: {
      channel: {
        type: String,
        default: ''
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      },
      autoResize: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        chart: null,
        // x轴时间
        time: [],
        // 新客户首逾率
        data11: [],
        // 老客户首逾率
        data22: [],
        // 续贷客户通过率
        data33: [],
        // 新客户通过率
        data44: [],
        // 转化率（注册用户申请转化率）
        data55: [],
        // 新客户占比
        data66: [],
        // 续贷客户占比
        data77: []
        // 通过客户中，新客户占比
        // data88: []
      };
    },
    computed: {
      getOptions() {
        return {
          xAxis: {
            type: 'category',
            data: this.time,
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            boundaryGap: false
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: [
              this.$t('loanPlanReport.data11'),
              this.$t('loanPlanReport.data22'),
              this.$t('loanPlanReport.data33'),
              this.$t('loanPlanReport.data44'),
              this.$t('loanPlanReport.data55'),
              this.$t('loanPlanReport.data66'),
              this.$t('loanPlanReport.data77')]
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: this.$t('loanPlanReport.data11'),
            smooth: true,
            type: 'line',
            data: this.data11,
            // data: [120, 132, 101, 134, 90, 230, 210],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          },
          {
            name: this.$t('loanPlanReport.data22'),
            smooth: true,
            type: 'line',
            data: this.data22,
            // data: [220, 182, 191, 234, 290, 330, 310],
            animationDuration: 2000,
            animationEasing: 'quadraticOut'
          }, {
            name: this.$t('loanPlanReport.data33'),
            smooth: true,
            type: 'line',
            data: this.data33,
            // data: [150, 232, 201, 154, 190, 330, 410],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          }, {
            name: this.$t('loanPlanReport.data44'),
            smooth: true,
            type: 'line',
            data: this.data44,
            // data: [320, 332, 301, 334, 390, 330, 320],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          }, {
            name: this.$t('loanPlanReport.data55'),
            smooth: true,
            type: 'line',
            data: this.data55,
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          }, {
            name: this.$t('loanPlanReport.data66'),
            smooth: true,
            type: 'line',
            data: this.data66,
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          }, {
            name: this.$t('loanPlanReport.data77'),
            smooth: true,
            type: 'line',
            data: this.data77,
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          }]
        }
      }
    },
    watch: {
      channel(newVal) {
        if (this.chart && newVal) {
          this.loadData()
        }
      }
    },
    mounted() {
      this.initChart();
      if (this.autoResize) {
        this.__resizeHanlder = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHanlder)
      }

      // 监听侧边栏的变化
      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHanlder)
      }

      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)

      this.chart.dispose()
      this.chart = null
    },
    methods: {
      loadData() {
        this.clearDataArr()
        getCustomerRateCount({
          channel: this.channel
        }).then(res => {
          if (res.status === 200) {
            res.data.forEach(item => {
              item.crtTime = item.crtTime.replace(/\s[\x00-\xff]*/g, '')
              this.time.push(item.crtTime)
              // 新客户首逾率
              this.data11.push(item.newCustomerFirstRate)
              // 老客户首逾率
              this.data22.push(item.oldCustomerFirstRate)
              // 续贷客户通过率
              this.data33.push(item.oldCustomerPassRate)
              // 新客户通过率
              this.data44.push(item.newCustomerPassRate)
              // 转化率（注册用户申请转化率）
              this.data55.push(item.transformRate)
              // 新客户占比
              this.data66.push(item.newCustomerRate)
              // 续贷客户占比
              this.data77.push(item.oldCustomerRate)
              // 通过客户中，新客户占比
              // this.data88.push(item.)
            })
            this.chart.setOption(this.getOptions)
          }
        })
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');

        this.chart.setOption(this.getOptions)
      },
      clearDataArr() {
        this.time = []
        this.data11 = []
        this.data22 = []
        this.data33 = []
        this.data44 = []
        this.data55 = []
        this.data66 = []
        this.data77 = []
        // this.data88 = []
      }
    }
}
</script>
